<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
 <title>jQuery Star Rating Plugin - Test Suite</title>
 <!--// documentation resources //-->
	<script src="../jquery.js" type="text/javascript"></script>
	<script src="../documentation.js" type="text/javascript"></script>
 <link href="../documentation.css" type="text/css" rel="stylesheet"/>
 <!--// plugin-specific resources //-->
 <script src="../jquery.form.js" type="text/javascript" language="javascript"></script>
	<script src="../jquery.MetaData.js" type="text/javascript" language="javascript"></script>
 <script src="../jquery.rating.js" type="text/javascript" language="javascript"></script>
 <link href="../jquery.rating.css" type="text/css" rel="stylesheet"/>
</head>
<body>

<div style="margin:20px 0 0 20px;">
 <h2>jQuery Star Rating Plugin - Test Suite</h2>
 <p>
  This is a template you can use to test your integration of this plugin.
 </p>
</div>

<div style="padding:20px">

 <h3>Dynamically inserted controls</h3>
 <p>
  This will work even if they have the same name or the name attribute has not been defined.
  <br/>
  NB.: If you don't use the name attribute the browser will not submit any values
 </p>
 <form name="html-test" id="html-test">
  <input type="button" value="Insert control" onClick="insert_dynamic_control(this.form);"/>
  <div class="controls" style="padding:5px; clear:both;"></div>
  <div style="padding:5px; clear:both;">
   <input type="button" value="Submit &raquo;" onClick="
    $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );
   "/>
   <span></span>
  </div>
 </form>
 <script type="text/javascript">
		function insert_dynamic_control(form){
			$('div.controls',form).html(
				['<input type="radio" class="star" name="dynamic-control" value="1"/>',
					'<input type="radio" class="star" name="dynamic-control" value="2"/>',
					'<input type="radio" class="star" name="dynamic-control" value="3"/>',
					'<input type="radio" class="star" name="dynamic-control" value="4"/>',
					'<input type="radio" class="star" name="dynamic-control" value="5"/>'
				].join('')
			);
			$('input[type=radio]',form).rating();
		};
 </script>
 
 <br/><br/><br/>
 
 <h3>$().rating('select', index / value)</h3>
 <p>
  Use this method to set the value (and display) of the star rating control
  via javascript. It accepts the index of the star you want to select (0 based)
  or its value (which must be passed as a string.
 </p>
 <p>
  Example: (values A/B/C/D/E)
 </p>
 <form name="api-select">
  <input type="radio" class="star" name="api-select-test" value="A"/>
  <input type="radio" class="star" name="api-select-test" value="B"/>
  <input type="radio" class="star" name="api-select-test" value="C"/>
  <input type="radio" class="star" name="api-select-test" value="D"/>
  <input type="radio" class="star" name="api-select-test" value="E"/>
  <input type="button" value="Submit &raquo;" onClick="
   $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );
  "/>
  <span></span>
  <br/>
  By index:
  <input type="button" onClick="javascript:$('input',this.form).rating('select',0)" value="0"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',1)" value="1"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',2)" value="2"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',3)" value="3"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',4)" value="4"/>
  eg.: $('input').rating('select',3)
  <br/>
  By value:
  <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="A"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="B"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="C"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="D"/>
  <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="E"/>
  eg.: $('input').rating('select','C')
 </form>
 
 <br/><br/><br/>
 
 <h3>$().rating('readOnly', true / false)</h3>
 <p>
  Use this method to set the value (and display) of the star rating control
  via javascript. It accepts the index of the star you want to select (0 based)
  or its value (which must be passed as a string.
 </p>
 <p>
  Example: (values 1,2,3...10)
 </p>
 <form name="api-readonly">
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="1"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="2"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="3"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="4"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="5"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="6"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="7"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="8"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="9"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="10"/>
  <input type="button" value="Submit &raquo;" onClick="
   $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );
  "/>
  <span></span>
  <br/>
  <input type="button" onClick="javascript:$('input',this.form).rating('readOnly',true)" value="Set readOnly = true"/>
  eg.: $('input').rating('readOnly',true)
  <br/>
  <input type="button" onClick="javascript:$('input',this.form).rating('readOnly',false)" value="Set readOnly = false"/>
  eg.: $('input').rating('readOnly',false) or simply $('input').rating('readOnly');
 </form>
 
 <br/><br/><br/>
 
 <h3>$().rating('disable') / $().rating('enable')</h3>
 <p>
  These methods bahve almost exactly as the readOnly method, however
  they also control whether or not the select value is submitted with
  the form.
 </p>
 <p>
  Example: (values 1,2,3...10)
 </p>
 <form name="api-disable">
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="1"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="2"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="3"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="4"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="5"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="6"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="7"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="8"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="9"/>
  <input type="radio" class="star {split:2}" name="api-readonly-test" value="10"/>
  <input type="button" value="Submit &raquo;" onClick="
   $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );
  "/>
  <span></span>
  <br/>
  <input type="button" onClick="javascript:$('input',this.form).rating('disable')" value="disable"/>
  eg.: $('input').rating('disable')
  <br/>
  <input type="button" onClick="javascript:$('input',this.form).rating('enable')" value="enable"/>
  eg.: $('input').rating('enable');
 </form>

</div>

</body>
</html>
